<template>
	<div class="content">
		<div class="contanier">
			<div class="nav">
				<span> 您当前的位置： </span>
				<a @click="$router.push({ name: 'index' })">考试系统</a> /
				<span> 通知公告 </span>
			</div>
			<div class="main">
				<div class="item" v-for="(item,index) in list" @click="toshowitem(item)">
					<div class="item0">（{{index+1}}）</div>
					<div class="item1">{{item.title}}</div>
					<div class="item2">{{item.createTime | filterdate}}</div>
					<div class="item3"><i class="el-icon-arrow-right"></i></div>
				</div>
			</div>
			
		</div>
		<nav-footer style="position: absolute;bottom: 0;"></nav-footer>
	</div>
</template>
<script>
	import { mapState, mapMutations } from "vuex";
	import NavFooter from '../../components/footer.vue'
	export default {
		components: { NavFooter, },
		data() {
			return {
				list:[]
			};
		},
		computed: {
			...mapState(["isLogin", "user"]),
		},
		mounted() {
			this.getlist()
		},
		filters:{
			filterdate(zdate){
				return zdate.substring(0,10)
			}
		},
		methods: {
			...mapMutations([
				"showLoginDialog",
				"changeDialogType",
				"changeUserCredit",
			]),
			async getlist(){
				var res=await this.$api.Notice.Getlist({type:'newtype1'})
				this.list=res.data.items
			},
			toshowitem(item){
				this.$router.push({
					name: 'Noticedetail',
					query: {id:item.id}
				})
			}
		},
	};
</script>
<style lang="less" scoped>
	.content {
		width: 100%;

		.contanier {
			width: 1200px;
			margin: 0 auto;
			overflow: hidden;
			.nav {
				width: 1200px;
				margin: 0 auto;
				height: 16px;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 16px;
				color: #999999;
				line-height: 16px;
				margin-top: 30px;
				margin-bottom: 30px;
			
				a {
					height: 16px;
					font-size: 16px;
					font-weight: 400;
					color: #999999;
					line-height: 16px;
					margin-right: 6px;
			
					&:not(:first-of-type) {
						margin-left: 6px;
					}
				}
			
				span {
					height: 16px;
					margin-left: 6px;
					font-size: 16px;
					font-weight: 400;
					color: #666666;
					line-height: 16px;
				}
			}
			.main{
				width:100%;
				padding:0;
				margin: 0;
				border-top: 2px solid #134b9f;
				background-color: #fff;
				.item{
					width:100%;
					height:60px;
					display:flex;
					flex-direction: row;
					align-items:center;
					font-size: 16px;
					color:#666;
					border-bottom: 1px solid #ccc;
					&:hover{
						background-color: #fafafa;
						.item3 i{
							background-color: #134b9f;
							color:#fff;
							border:none;
						}
					}
					.item0{
						width:40px;
						text-align:center;
					}
					.item1{
						flex:1;
					}
					.item2{
						width:130px;
					}
					.item3{
						width:60px;
						i{
							width:26px;
							height:26px;
							border-radius: 13px;
							display:flex;
							justify-content: center;
							align-items: center;
							border:1px solid #ccc;
						}
						
					}
				}
				
			}

		}
	}
</style>
